<script lang="tsx">
import { defineComponent } from 'vue'
import { Tag } from 'ant-design-vue'
import { useDictStoreWithout } from '@/store/modules/dict'
import { propTypes } from '@/utils/propTypes'

export default defineComponent({
  name: 'DictTag',
  props: {
    dictTypeCode: {
      type: String as PropType<string>,
      required: true,
    },
    dictValue: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.bool]),
  },
  setup(props) {
    const dictStore = useDictStoreWithout()
    const { dictName, dictMeta } = dictStore.getDict(
      props.dictTypeCode,
      `${props.dictValue}`,
    )
    const { cssClass, color } = dictMeta || {}
    const render = () => {
      return (
        <Tag color={color || ''} class={cssClass || ''}>
          {dictName || ''}
        </Tag>
      )
    }
    return render
  },
})
</script>
